@use '../variables';
@use '../../../styles/mixins';

$block: '.#{variables.$ns}card';

#{$block} {
    --_--background-color: transparent;
    --_--border-color: transparent;
    --_--border-width: 0;
    --_--box-shadow: none;

    box-shadow: var(--g-card-box-shadow, var(--_--box-shadow));
    box-sizing: border-box;
    background-color: var(--g-card-background-color, var(--_--background-color));
    border: var(--g-card-border-width, var(--_--border-width)) solid
        var(--g-card-border-color, var(--_--border-color));
    border-radius: var(--g-card-border-radius, var(--_--border-radius));
    outline: none;

    &_theme {
        &_normal {
            --_--border-color: var(--g-color-line-generic);
            --_--background-color: var(--g-color-base-generic);
        }

        &_info {
            --_--border-color: var(--g-color-line-info);
            --_--background-color: var(--g-color-base-info-light);
        }

        &_success {
            --_--border-color: var(--g-color-line-positive);
            --_--background-color: var(--g-color-base-positive-light);
        }

        &_warning {
            --_--border-color: var(--g-color-line-warning);
            --_--background-color: var(--g-color-base-warning-light);
        }

        &_danger {
            --_--border-color: var(--g-color-line-danger);
            --_--background-color: var(--g-color-base-danger-light);
        }

        &_utility {
            --_--border-color: var(--g-color-line-utility);
            --_--background-color: var(--g-color-base-utility-light);
        }
    }

    &_view {
        &_clear {
            --_--background-color: transparent;
        }

        &_outlined {
            --_--background-color: transparent;
            --_--border-width: 1px;
        }
    }

    &_type_action {
        --_--background-color: var(--g-color-base-float);
        --_--box-shadow: 0px 1px 5px var(--g-color-sfx-shadow);

        &::after {
            position: absolute;
            inset: 0;
            border-radius: var(--g-card-border-radius, var(--_--border-radius));
            pointer-events: none;
        }

        &#{$block}_clickable {
            cursor: pointer;
            position: relative;

            &:hover {
                --_--box-shadow: 0px 3px 10px var(--g-color-sfx-shadow);
            }

            &:focus-visible::after {
                @include mixins.focus-outline();
                content: '';
            }
        }
    }

    &_type_selection {
        --_--border-width: 1px;
        --_--border-color: var(--g-color-line-generic);
        position: relative;

        &::before {
            position: absolute;
            inset: -1px;
            border-radius: var(--g-card-border-radius, var(--_--border-radius));
            pointer-events: none;
        }

        &::after {
            position: absolute;
            inset: 0;
            border-radius: var(--g-card-border-radius, var(--_--border-radius));
            pointer-events: none;
        }

        &#{$block}_clickable {
            cursor: pointer;

            &:hover {
                --_--border-color: transparent;

                &:not(#{$block}_selected)::before {
                    content: '';
                    border: 2px solid var(--g-color-line-brand);
                    opacity: 0.5;
                }

                &:focus-visible::before {
                    border-color: transparent;
                }
            }

            &:focus-visible::after {
                @include mixins.focus-outline();
                content: '';
            }
        }

        &#{$block}_selected:not(#{$block}_disabled) {
            --_--border-color: transparent;

            &::before {
                content: '';
                border: 2px solid var(--g-color-line-brand);
            }
        }

        &#{$block}_view_clear {
            --_--border-color: transparent;
        }
    }

    &_type_container {
        &#{$block}_view_raised {
            --_--background-color: var(--g-color-base-float);

            @at-root &#{$block}_size_m {
                --_--box-shadow: 0px 1px 5px var(--g-color-sfx-shadow);
            }
            @at-root &#{$block}_size_l {
                --_--box-shadow:
                    0px 1px 6px var(--g-color-sfx-shadow-light),
                    1px 3px 13px var(--g-color-sfx-shadow-light);
            }
        }
    }

    &_size {
        &_m {
            --_--border-radius: 8px;
        }

        &_l {
            --_--border-radius: 16px;
        }
    }
}
